<template>
  <div class="upload-image">
    <!-- 单图 -->
    <a-space wrap>
      <div
        :class="'image-list ' + (config.rounded ? 'rounded-full' : '')"
        v-if="!config.multiple && currentItem?.url && config.showList"
      >
        <a-button class="delete" @click="removeSignImage">
          <template #icon>
            <icon-delete />
          </template>
        </a-button>
        <a-image width="100" height="100" :class="config.rounded ? 'rounded-full' : ''" :src="currentItem.url" />
      </div>
      <!-- 多图显示 -->
      <template v-else-if="config.multiple && config.showList">
        <div :class="'image-list ' + (config.rounded ? 'rounded-full' : '')" v-for="(image, idx) in showImgList" :key="idx">
          <a-button class="delete" @click="removeImage(idx)">
            <template #icon>
              <icon-delete />
            </template>
          </a-button>
          <a-image width="100" height="100" :class="config.rounded ? 'rounded-full' : ''" :src="image.url" />
        </div>
      </template>

      <a-upload
        :custom-request="uploadImageHandler"
        :show-file-list="false"
        :multiple="config.multiple"
        :accept="config.accept ?? '.jpg,jpeg,.gif,.png,.svg,.bpm'"
        :disabled="config.disabled"
        :tip="config.tip"
        :limit="config.limit"
      >
        <template #upload-button>
          <slot name="customer">
            <div
              :class="'upload-skin ' + (config.rounded ? 'rounded-full' : 'rounded-sm')"
              v-if="!props.modelValue || config.multiple"
            >
              <div class="icon">
                <component :is="config.icon" />
              </div>
              <div class="title">
                {{ config.title === "buttonText" ? "本地上传" : config.title }}
              </div>
            </div>
          </slot>
        </template>
      </a-upload>
    </a-space>
  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import { isArray, throttle } from "lodash";
import { getFileUrl, uploadRequest } from "../types/utils";
import { Message } from "@arco-design/web-vue";

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: () => {}
  }
});
const emit = defineEmits(["update:modelValue"]);
const config = inject("config");
const storageMode = inject("storageMode");
const showImgList = ref([]);
const signImage = ref();
const currentItem = ref({});

const uploadImageHandler = async options => {
  if (!options.fileItem) return;
  if (!config.multiple) {
    currentItem.value = options.fileItem;
  }
  const file = options.fileItem.file;
  if (file.size > config.size) {
    Message.warning(file.name + " " + "文件大小超过了限制");
    currentItem.value = {};
    return;
  }
  const result = await uploadRequest(file, "file", config.requestData);
  if (result) {
    if (!config.multiple) {
      signImage.value = result[config.returnType];
      emit("update:modelValue", signImage.value);
    } else {
      showImgList.value.push(result);
      let files = [];
      files = showImgList.value.map(item => {
        return item[config.returnType];
      });
      emit("update:modelValue", files);
    }
  }
};

const removeSignImage = () => {
  currentItem.value = {};
  signImage.value = undefined;
  emit("update:modelValue", null);
};

const removeImage = idx => {
  showImgList.value.splice(idx, 1);
  let files = [];
  files = showImgList.value.map(item => {
    return item[config.returnType];
  });
  emit("update:modelValue", files);
};

const init = throttle(async () => {
  if (config.multiple) {
    if (isArray(props.modelValue) && props.modelValue.length > 0) {
      const result = await props.modelValue.map(async item => {
        return await getFileUrl(item);
      });
      const data = await Promise.all(result);
      if (config.returnType === "url") {
        showImgList.value = data.map(url => {
          return { url };
        });
      } else {
        showImgList.value = data.map(item => {
          return { url: item.url, [config.returnType]: item[config.returnType] };
        });
      }
    } else {
      showImgList.value = [];
    }
  } else if (props.modelValue) {
    if (config.returnType === "url") {
      signImage.value = props.modelValue;
      currentItem.value.url = props.modelValue;
    } else {
      const result = await getFileUrl(props.modelValue);
      signImage.value = result.url;
      currentItem.value.url = result.url;
    }
    currentItem.value.percent = 100;
    currentItem.value.status = "complete";
  } else {
    removeSignImage();
  }
}, 1000);

watch(
  () => props.modelValue,
  val => {
    init();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="less" scoped>
.upload-skin {
  background-color: var(--color-fill-2);
  border: 1px dashed var(--color-fill-4);
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .icon,
  .title {
    color: var(--color-text-3);
  }
}

.image-list {
  cursor: pointer;
  position: relative;
  background-color: var(--color-fill-2);
  width: 100px;
  height: 100px;

  .delete {
    position: absolute;
    z-index: 99;
    right: 3px;
    top: 3px;
    display: none;
  }

  .progress {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

.image-list:hover {
  .delete {
    display: block;
  }
}

.upload-skin:hover {
  border: 1px dashed rgb(var(--primary-6));
}
</style>
